<bit-callout
  type="danger"
  title="{{ 'vaultExportDisabled' | i18n }}"
  *ngIf="disablePersonalVaultExportPolicy$ | async"
>
  {{ "personalVaultExportPolicyInEffect" | i18n }}
</bit-callout>
<tools-export-scope-callout
  [organizationId]="organizationId"
  [exportFormat]="format"
  [orgExportDescription]="orgExportDescription"
></tools-export-scope-callout>

<form [formGroup]="exportForm" [bitSubmit]="submit" id="export_form_exportForm">
  <ng-container *ngIf="organizations$ | async as organizations">
    <bit-form-field *ngIf="organizations.length > 0">
      <bit-label>{{ "exportFrom" | i18n }}</bit-label>
      <bit-select formControlName="vaultSelector">
        <bit-option
          [label]="'myVault' | i18n"
          value="myVault"
          icon="bwi-user"
          *ngIf="!(organizationDataOwnershipPolicyAppliesToUser$ | async)"
        />
        <bit-option
          *ngFor="let o of organizations"
          [value]="o.id"
          [label]="o.name"
          icon="bwi-business"
        />
      </bit-select>
    </bit-form-field>
  </ng-container>

  <bit-form-field>
    <bit-label>{{ "fileFormat" | i18n }}</bit-label>
    <bit-select formControlName="format">
      <bit-option *ngFor="let f of formatOptions$ | async" [value]="f.format" [label]="f.name" />
    </bit-select>
  </bit-form-field>

  <ng-container *ngIf="format === 'encrypted_json'">
    <bit-radio-group formControlName="fileEncryptionType" aria-label="exportTypeHeading">
      <bit-label>{{ "exportTypeHeading" | i18n }}</bit-label>

      <bit-radio-button
        id="AccountEncrypted"
        name="fileEncryptionType"
        class="tw-block"
        [value]="encryptedExportType.AccountEncrypted"
        checked="fileEncryptionType === encryptedExportType.AccountEncrypted"
      >
        <bit-label>{{ "accountRestricted" | i18n }}</bit-label>
        <bit-hint>{{ "accountRestrictedOptionDescription" | i18n }}</bit-hint>
      </bit-radio-button>

      <bit-radio-button
        id="FileEncrypted"
        name="fileEncryptionType"
        class="tw-block"
        [value]="encryptedExportType.FileEncrypted"
        checked="fileEncryptionType === encryptedExportType.FileEncrypted"
      >
        <bit-label>{{ "passwordProtected" | i18n }}</bit-label>
        <bit-hint>{{ "passwordProtectedOptionDescription" | i18n }}</bit-hint>
      </bit-radio-button>
    </bit-radio-group>

    <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
      <div class="tw-mb-3">
        <bit-form-field>
          <bit-label>{{ "filePassword" | i18n }}</bit-label>
          <input
            bitInput
            type="password"
            id="filePassword"
            formControlName="filePassword"
            name="password"
          />
          <button
            type="button"
            bitSuffix
            bitIconButton
            bitPasswordInputToggle
            [(toggled)]="showFilePassword"
          ></button>
          <button
            type="button"
            bitIconButton="bwi-generate"
            appStopClick
            bitSuffix
            (click)="generatePassword()"
            [label]="'generatePassword' | i18n"
          ></button>
          <button
            type="button"
            bitIconButton="bwi-clone"
            [disabled]="!filePassword"
            appStopClick
            bitSuffix
            [appCopyClick]="filePassword"
            [valueLabel]="'password' | i18n"
            [label]="'password' | i18n"
            showToast
          ></button>
          <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
        </bit-form-field>
        <tools-password-strength [password]="filePassword" [showText]="true">
        </tools-password-strength>
      </div>
      <bit-form-field>
        <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
        <input
          bitInput
          type="password"
          id="confirmFilePassword"
          formControlName="confirmFilePassword"
          name="confirmFilePassword"
        />
        <button
          type="button"
          bitSuffix
          bitIconButton
          bitPasswordInputToggle
          [(toggled)]="showFilePassword"
        ></button>
      </bit-form-field>
    </ng-container>
  </ng-container>
</form>
